<template>
  <div class="order-status-page">
    <!-- 面包屑导航 -->
    <div class="top">
      <div class="breadcrumb">
        <span @click="goHome">首页</span>
        <i class="iconfont icon-arrow-right"></i>
        <span>订单状态</span>
      </div>

      <!-- 顶部操作栏 -->
      <div class="top-actions">
        <div class="view-toggle">
          <button
            class="view-btn"
            :class="{ active: viewMode === 'card' }"
            @click="viewMode = 'card'"
          >
            <i class="iconfont icon-tilesview"></i>卡片视图
          </button>
          <button
            class="view-btn"
            :class="{ active: viewMode === 'table' }"
            @click="viewMode = 'table'"
          >
            <i class="iconfont icon-listview"></i>表格视图
          </button>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <div class="filter-bar">
        <!-- 日期筛选 -->
        <div class="filter-group">
          <label>日期筛选</label>
          <button
            class="date-filter-btn"
            @click="toggleCalendar"
          >
            <span>{{ dateText }}</span>
            <i class="iconfont icon-calendar"></i>
          </button>

          <!-- 迷你日历组件 -->
          <MiniCalendar
            v-if="showCalendar"
            v-model="selectedDate"
            :visible="showCalendar"
            mode="single"
            @apply="applyDateSelection"
          />
        </div>

        <!-- 订单类型筛选 -->
        <div class="filter-group">
          <label>订单类型</label>
          <BaseSelect
            v-model="filterType"
            :options="typeOptions"
            @update:modelValue="refreshOrders"
          />
        </div>

        <!-- 订单状态筛选 -->
        <div class="filter-group">
          <label>订单状态</label>
          <BaseSelect
            v-model="filterStatus"
            :options="statusOptions"
            @update:modelValue="refreshOrders"
          />
        </div>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="data-cards">
      <div class="data-card" :style="{ backgroundColor: '#eef5ff' }">
        <div class="card-value">128</div>
        <div class="card-label">总订单数</div>
      </div>
      <div class="data-card" :style="{ backgroundColor: '#fcf2e6', color: '#ea8634' }">
        <div class="card-value">24</div>
        <div class="card-label">待处理</div>
      </div>
      <div class="data-card" :style="{ backgroundColor: '#e8f5fe', color: '#3c92f6' }">
        <div class="card-value">18</div>
        <div class="card-label">处理中</div>
      </div>
      <div class="data-card" :style="{ backgroundColor: '#e7f6f1', color: '#54ad81' }">
        <div class="card-value">86</div>
        <div class="card-label">已完成</div>
      </div>
    </div>

    <!-- 卡片视图 -->
    <div
      class="order-grid"
      v-if="viewMode === 'card'"
    >
      <div
        class="order-card"
        v-for="(order, index) in orders"
        :key="order.id"
        :class="order.status==='已完成'?'finished':''"
      >
        <!-- 顶部信息 -->
        <div class="card-header">
          <div class="order-info">
            <div class="order-no">订单号: {{ order.order_number }}</div>
            <div class="order-channel">渠道: {{ order.channel }}</div>
          </div>
          <div
            class="order-status"
            :class="getStatusClass(order.status)"
          >
            {{ order.status }}
          </div>
        </div>

        <!-- 客户信息行（包含总金额） -->
        <div class="customer-row">
          <div class="customer-info">
            <div class="customer-name">{{ order.customer_name }}</div>
            <div class="customer-phone">{{ order.phone }}</div>
          </div>
          <div class="total-amount">
            <text class="small">￥</text>{{ parseFloat(order.total_amount).toFixed(0) }}
          </div>
        </div>

        <!-- 服务信息 -->
        <div class="service-info">
          <div class="service-type">{{ order.type }}</div>
          <div class="service-period">
            {{ formatDate(order.start_date) }} 至 {{ formatDate(order.end_date) }}
          </div>
        </div>

        <!-- 金额信息 -->
        <div class="amount-info">
          <div class="amount-item">
            <span class="label">订金:</span>
            <span class="value">{{ order.deposit }}元</span>
          </div>
          <div class="amount-item">
            <span class="label">尾款:</span>
            <span class="value">{{ order.final_payment }}元</span>
          </div>
        </div>

        <!-- 操作按钮（横向排列） -->
        <div class="card-actions">
          <button
            class="action-btn edit-btn"
            @click="editOrder(order)"
          >
            <i class="iconfont icon-edit"></i>
            <span>编辑</span>
          </button>
          <button
            class="action-btn material-btn"
            :class="getMaterialClass(order.has_material)"
            @click="handleMaterial(order)"
          >
            <i class="iconfont icon-file"></i>
            <span>{{ getMaterialText(order.has_material) }}</span>
          </button>
          <button
            class="action-btn complete-btn"
            @click="completeOrder(order)"
            :disabled="order.status === '已完成'"
          >
            <i class="iconfont icon-correct"></i>
            <span>{{ order.status === '已完成' ? '已完成' : '完成' }}</span>
          </button>
        </div>
        <div
          class="finishedText"
          v-if="order.status === '已完成'"
        >已完成</div>
      </div>
    </div>

    <!-- 表格视图 -->
    <div
      class="order-table-container"
      v-if="viewMode === 'table'"
    >
      <table class="order-table">
        <thead>
          <tr>
            <th>订单编号</th>
            <th>客户名称</th>
            <th>订单日期</th>
            <th>订单类型</th>
            <th>场次天数</th>
            <th>总金额</th>
            <th>订单状态</th>
            <th>进度</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="order in orders"
            :key="order.id"
          >
            <td>{{ order.order_number }}</td>
            <td>{{ order.customer_name }}</td>
            <td>{{ formatDate(order.order_date) }}</td>
            <td>
              {{ order.type }}
              <span class="tag" :class="getTagClass(order.type)">{{ order.type }}</span>
            </td>
            <td>{{ order.days }}天</td>
            <td class="amount-cell">￥{{ parseFloat(order.total_amount).toFixed(0) }}</td>
            <td>
              <span class="status-tag" :class="getStatusClass(order.status)">
                {{ order.status }}
              </span>
            </td>
            <td>
              <div class="progress-bar">
                <div class="progress" :style="{ width: order.progress + '%', backgroundColor: getProgressColor(order.progress) }"></div>
              </div>
            </td>
            <td class="action-cell">
              <button
                class="table-action-btn edit-btn"
                @click="editOrder(order)"
              >
                <i class="iconfont icon-edit"></i>
                <span>编辑</span>
              </button>
              <button
                class="table-action-btn detail-btn"
                @click="showDetail(order)"
              >
                <i class="iconfont icon-detail"></i>
                <span>详情</span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 空状态 -->
    <div
      v-if="orders.length === 0 && !loading"
      class="empty-state"
    >
      <i class="iconfont icon-empty"></i>
      <p>暂无订单数据</p>
    </div>

    <!-- 分页控件 -->
    <div class="pagination">
      <button
        :disabled="currentPage === 1"
        @click="prevPage"
      >
        上一页
      </button>
      <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button
        :disabled="currentPage === totalPages"
        @click="nextPage"
      >
        下一页
      </button>
      <select
        class="page-size-select"
        v-model="pageSize"
        @change="handleSizeChange"
      >
        <option value="10">10条/页</option>
        <option value="20">20条/页</option>
        <option value="50">50条/页</option>
        <option value="100">100条/页</option>
      </select>
    </div>

    <!-- 订单详情对话框 -->
    <OrderDetailDialog 
      v-if="detailVisible"
      :order="currentOrder"
      @close="detailVisible = false"
      @process="handleProcess"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import MiniCalendar from "@/components/MiniCalendar.vue";
import BaseSelect from "@/components/BaseSelect.vue";
import OrderDetailDialog from "@/components/OrderDetailDialog.vue";
import { format, parseISO } from "date-fns";

const router = useRouter();

// 视图模式
const viewMode = ref("table"); // card | table

// 筛选条件
const selectedDate = ref(null);
const filterType = ref("");
const filterStatus = ref("");

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));

// 订单数据
const orders = ref([]);
const loading = ref(false);

// 显示日历
const showCalendar = ref(false);
const toggleCalendar = () => {
  showCalendar.value = !showCalendar.value;
};

// 选项数据
const typeOptions = ref([
  { text: "全部类型", value: "" },
  { text: "婚礼", value: "婚礼" },
  { text: "商业", value: "商业" },
  { text: "广告", value: "广告" },
  { text: "电商", value: "电商" },
  { text: "活动", value: "活动" },
]);

const statusOptions = ref([
  { text: "全部状态", value: "" },
  { text: "待处理", value: "待处理" },
  { text: "处理中", value: "处理中" },
  { text: "已完成", value: "已完成" },
  { text: "已取消", value: "已取消" }
]);

// 日期文本
const dateText = computed(() => {
  if (selectedDate.value) {
    return format(selectedDate.value, "yyyy-MM-dd");
  }
  return "选择日期";
});

// 订单详情
const detailVisible = ref(false);
const currentOrder = ref({});

// 模拟加载订单数据
onMounted(() => {
  loadOrders();
});

const loadOrders = () => {
  loading.value = true;
  // 模拟API请求
  setTimeout(() => {
    orders.value = [
      {
        id: "1",
        order_number: "ORD202308001",
        order_date: "2025-08-01",
        customer_name: "张先生",
        phone: "13800138000",
        type: "婚礼",
        channel: "官网",
        start_date: "2025-09-10",
        end_date: "2025-09-12",
        days: 3,
        total_amount: "3600.00",
        deposit: "1200.00",
        final_payment: "2400.00",
        status: "处理中",
        progress: 45,
        has_material: "0",
        remarks: "需要拍摄新人婚纱照和婚礼现场"
      },
      {
        id: "2",
        order_number: "ORD202308002",
        order_date: "2025-08-03",
        customer_name: "ABC公司",
        phone: "13900139000",
        type: "商业",
        channel: "线下",
        start_date: "2025-08-15",
        end_date: "2025-08-16",
        days: 2,
        total_amount: "5000.00",
        deposit: "2000.00",
        final_payment: "3000.00",
        status: "待处理",
        progress: 0,
        has_material: "0",
        remarks: "新款电子产品拍摄，需要白底和场景图"
      },
      {
        id: "3",
        order_number: "ORD202308003",
        order_date: "2025-08-05",
        customer_name: "XYZ品牌",
        phone: "13700137000",
        type: "广告",
        channel: "推荐",
        start_date: "2025-09-01",
        end_date: "2025-09-05",
        days: 5,
        total_amount: "12000.00",
        deposit: "5000.00",
        final_payment: "7000.00",
        status: "处理中",
        progress: 30,
        has_material: "1",
        remarks: "秋季新品广告拍摄，需要模特和产品结合"
      },
      {
        id: "4",
        order_number: "ORD202308004",
        order_date: "2025-08-08",
        customer_name: "李小姐",
        phone: "13600136000",
        type: "婚礼",
        channel: "官网",
        start_date: "2025-08-30",
        end_date: "2025-08-30",
        days: 1,
        total_amount: "2000.00",
        deposit: "1000.00",
        final_payment: "1000.00",
        status: "已完成",
        progress: 100,
        has_material: "1",
        remarks: "户外婚纱拍摄，西湖景区取景"
      }
    ];
    totalItems.value = 50;
    loading.value = false;
  }, 500);
};

// 获取素材状态文本
const getMaterialText = (status) => {
  switch (status) {
    case "0":
      return "未上传";
    case "1":
      return "已上传";
    case "2":
      return "无需备份";
    default:
      return "未知";
  }
};

// 获取素材状态类名
const getMaterialClass = (status) => {
  switch (status) {
    case "0":
      return "no-material";
    case "1":
      return "has-material";
    case "2":
      return "no-need";
    default:
      return "";
  }
};

// 获取标签类型
const getTagClass = (type) => {
  const types = {
    '婚礼': 'wedding',
    '商业': 'commercial',
    '广告': 'ad',
    '电商': 'ecommerce',
    '活动': 'event'
  }
  return types[type] || '';
};

// 获取状态样式
const getStatusClass = (status) => {
  switch (status) {
    case "待处理":
      return "pending";
    case "处理中":
      return "processing";
    case "已完成":
      return "completed";
    case "已取消":
      return "cancelled";
    default:
      return "";
  }
};

// 获取进度条颜色
const getProgressColor = (percentage) => {
  if (percentage < 30) {
    return '#f56c6c'; // 红色
  } else if (percentage < 70) {
    return '#e6a23c'; // 黄色
  } else {
    return '#67c23a'; // 绿色
  }
};

// 刷新订单数据
const refreshOrders = () => {
  currentPage.value = 1;
  loadOrders();
};

// 应用日期选择
const applyDateSelection = () => {
  showCalendar.value = false;
  refreshOrders();
};

// 分页变化
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    loadOrders();
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    loadOrders();
  }
};

// 修改每页显示数量
const handleSizeChange = () => {
  currentPage.value = 1;
  loadOrders();
};

// 返回首页
const goHome = () => {
  router.push({ name: "root" });
};

// 编辑订单
const editOrder = (order) => {
  console.log("编辑订单:", order);
  // 实际项目中这里应该跳转到编辑页面
};

// 处理素材
const handleMaterial = (order) => {
  console.log("处理素材:", order);
  // 实际项目中这里应该跳转到素材页面
};

// 完成订单
const completeOrder = (order) => {
  if (order.status === "已完成") return;
  
  console.log("完成订单:", order);
  // 实际项目中这里应该调用API
  order.status = "已完成";
  order.progress = 100;
};

// 显示详情
const showDetail = (order) => {
  currentOrder.value = order;
  detailVisible.value = true;
};

// 处理订单
const handleProcess = () => {
  console.log("处理订单:", currentOrder.value);
  detailVisible.value = false;
};

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return "";
  return format(parseISO(dateString), "yyyy-MM-dd");
};
</script>

<style scoped lang="less">
.order-status-page {
  padding: 20px;
  background-color: var(--bs-bg-color);
  display: flex;
  flex-direction: column;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;

  span {
    cursor: pointer;
    transition: color 0.2s;

    &:hover {
      color: #3f91f7;
    }
  }

  .iconfont {
    margin: 0 8px;
    font-size: 12px;
    color: #999;
  }
}

.top-actions {
  display: flex;
  justify-content: flex-end;
}

.view-toggle {
  display: flex;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
}

.view-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s;

  &.active {
    background: #3f91f7;
    color: white;
  }

  .iconfont {
    font-size: 16px;
  }
}

.filter-container {
  margin-bottom: 20px;
}

.filter-bar {
  display: flex;
  gap: 20px;
}

.filter-group {
  flex: 1;
  position: relative;
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #606266;
  }
}

.date-filter-btn {
  width: 100%;
  height: 36px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--bs-text-color);
  transition: all 0.3s;
  padding: 0 12px;

  &:hover {
    border-color: #c0c4cc;
  }

  .iconfont {
    color: var(--bs-text-color);
  }
}

/* 数据概览卡片 */
.data-cards {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;

  .data-card {
    flex: 1;
    padding: 15px;
    border-radius: 8px;

    .card-value {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .card-label {
      font-size: 14px;
    }
  }
}

/* 卡片视图样式 */
.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.order-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  }

  &.finished {
    background: #f0f0f0;
    box-shadow: none;
    border: 1px solid #ddd;

    &:hover {
      transform: none;
    }

    .amount-item {
      background: #e0e4ee;
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bs-border-color);
}

.order-info {
  flex: 1;
}

.order-no {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 5px;
}

.order-channel {
  font-size: 14px;
  color: #3f91f7;
}

.order-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;

  &.pending {
    background: #fdf6ec;
    color: #e6a23c;
  }

  &.processing {
    background: #ecf5ff;
    color: #3f91f7;
  }

  &.completed {
    background: #f0f9eb;
    color: #67c23a;
  }

  &.cancelled {
    background: #fef0f0;
    color: #f56c6c;
  }
}

.customer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.customer-info {
  flex: 1;
}

.customer-name {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.customer-phone {
  font-size: 14px;
  color: #606266;
}

.total-amount {
  font-size: 24px;
  font-weight: lighter;
  color: #3f91f7;

  .small {
    font-size: 14px;
    color: var(--bs-text-color);
    padding-right: 4px;
    font-weight: normal;
  }
}

.service-info {
  margin-bottom: 15px;
}

.service-type {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 5px;
}

.service-period {
  font-size: 14px;
  color: #606266;
}

.amount-info {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.amount-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 8px;

  .label {
    display: block;
    font-size: 14px;
    color: #606266;
    margin-bottom: 5px;
  }

  .value {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
}

.card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.action-btn {
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-grow: 1;
  justify-content: center;

  &.edit-btn {
    background-color: white;
    color: #3f91f7;
    border: 1px solid #3f91f7;

    &:hover {
      background-color: #ecf5ff;
    }
  }

  &.material-btn {
    background-color: white;
    border: 1px solid;

    &.has-material {
      color: #67c23a;
      border-color: #67c23a;

      &:hover {
        background-color: #f0f9eb;
      }
    }

    &.no-material {
      color: #f56c6c;
      border-color: #f56c6c;

      &:hover {
        background-color: #fef0f0;
      }
    }

    &.no-need {
      color: #909399;
      border-color: #909399;

      &:hover {
        background-color: #f4f4f5;
      }
    }
  }

  &.complete-btn {
    background-color: #3f91f7;
    color: white;

    &:hover:not(:disabled) {
      opacity: 0.9;
    }

    &:disabled {
      background-color: #c0c4cc;
      cursor: not-allowed;
      opacity: 0.7;
    }
  }

  .iconfont {
    font-size: 16px;
  }
}

/* 表格视图样式 */
.order-table-container {
  overflow-x: auto;
  margin-bottom: 20px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;

  th {
    background-color: #f5f5f5;
    padding: 12px;
    text-align: left;
    font-weight: 500;
    color: #606266;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }

  td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #606266;
  }

  tr:last-child td {
    border-bottom: none;
  }
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 5px;

  &.wedding {
    background-color: #f0f9eb;
    color: #67c23a;
  }

  &.commercial {
    background-color: #ecf5ff;
    color: #409eff;
  }

  &.ad {
    background-color: #fdf6ec;
    color: #e6a23c;
  }

  &.ecommerce {
    background-color: #f0f4ff;
    color: #5a7cff;
  }

  &.event {
    background-color: #fef0f0;
    color: #f56c6c;
  }
}

.status-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;

  &.pending {
    background: #fdf6ec;
    color: #e6a23c;
  }

  &.processing {
    background: #ecf5ff;
    color: #3f91f7;
  }

  &.completed {
    background: #f0f9eb;
    color: #67c23a;
  }

  &.cancelled {
    background: #fef0f0;
    color: #f56c6c;
  }
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #ebeef5;
  border-radius: 4px;
  overflow: hidden;

  .progress {
    height: 100%;
    border-radius: 4px;
  }
}

.amount-cell {
  font-weight: 500;
  color: #333;
}

.action-cell {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.table-action-btn {
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  justify-content: center;

  &.edit-btn {
    background-color: white;
    color: #3f91f7;
    border: 1px solid #3f91f7;

    &:hover {
      background-color: #ecf5ff;
    }
  }

  &.detail-btn {
    background-color: white;
    color: #909399;
    border: 1px solid #909399;

    &:hover {
      background-color: #f4f4f5;
    }
  }

  .iconfont {
    font-size: 16px;
  }
}

.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #999;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .iconfont {
    font-size: 48px;
    margin-bottom: 16px;
    color: #c0c4cc;
  }

  p {
    margin: 0;
    font-size: 16px;
  }
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  button {
    padding: 8px 16px;
    background-color: white;
    border: 1px solid #dcdfe6;
    color: #606266;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;

    &:hover:not(:disabled) {
      background-color: #f5f7fa;
      border-color: #c0c4cc;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

.page-info {
  color: #606266;
  font-size: 14px;
}

.page-size-select {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: white;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 12px;

  &:hover {
    border-color: #3f91f7;
  }
}

.finishedText {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 44px;
  transform: rotate(30deg);
  opacity: 0.6;
  pointer-events: none;
}

</style>